<template>
    <view>
		<u-navbar :is-back="true" :title="titleName" :border-bottom="false"></u-navbar>
	   <u-tabs :list="categorylist" :is-scroll="true" :current="current" @change="change"></u-tabs>
       <view class="u-p-l-10 u-p-r-10 waterfall">
		   <u-waterfall v-model="flowList" ref="uWaterfall">
		       <template v-slot:left="{leftList}">
		           <view class="demo-warter" v-for="(item, index) in leftList" :key="index">
		               <u-lazy-load threshold="750" border-radius="12" :image="item.goodsImage" :index="index"
		                           @click="clickImageGo(item.id)"></u-lazy-load>
		               <view class="item-title">{{item.goodsName}}</view>
		   			<view class="item-price">积分：{{item.goodsIntegral}}</view>
		               <view class="item-desc"> 
						<u-tag :text="item.sf" type="success" mode="dark" shape="circle" size = "mini" class= "u-p-r-20"/>
						<u-tag :text="item.lx" type="success" mode="dark" shape="circle" size = "mini" class= "u-p-r-20"/>
						<u-tag :text="item.userLevel" type="success" mode="dark" shape="circle" size = "mini" class= "u-p-r-20"/>
					   </view>
		           </view>
		       </template>
		       <template v-slot:right="{rightList}">
		           <view class="demo-warter" v-for="(item, index) in rightList" :key="index">
		               <u-lazy-load threshold="750" border-radius="10" :image="item.goodsImage" :index="index"
		                           @click="clickImageGo(item.id)"></u-lazy-load>
		               <view class="item-title">{{item.goodsName}}</view>
		               <view class="item-price">积分：{{item.goodsIntegral}}</view>
		   			 <view class="item-desc">
						 <u-tag :text="item.sf" type="success" mode="dark" shape="circle" size = "mini" class= "u-p-r-20"/>
						 <u-tag :text="item.lx" type="success" mode="dark" shape="circle" size = "mini" class= "u-p-r-20"/>
						 <u-tag :text="item.userLevel" type="success" mode="dark" shape="circle" size = "mini" class= "u-p-r-20"/>
					 </view>
		           </view>
		       </template>
		   </u-waterfall>
		   <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="findHouseList" style="height: 80rpx;line-height: 80rpx;"></u-loadmore>
		   <u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>
		   <u-no-network></u-no-network>
	   </view>
	   
	   <view>
	   		<u-modal v-model="sfShow" show-cancel-button = "true" @confirm="confirmC" :content="sfContent"></u-modal>
	   	</view>
    </view>
</template>

<script>
	import config from "@/common/config.js" // 全局配置文件
	import searchData from '@/common/utils/searchData.js';//筛选菜单数据
    import filterDropdown from '@/components/zy/filterDropdown.vue';
    export default {
        components: {
            filterDropdown
        },
        data() {
            return {
				indexArr: [],
				valueArr: [],
                defaultSelected: [],
                filterData: [],
				searchData:{},
				pageNum: 1,
				pageSize: 20,
				scrollTop: 0,
				houseList: [],
                loadStatus: 'loadmore',
                flowList: [],
				titleName: '',
				categorylist: [],
				current: 0,
				categoryId: 0,
				sfShow: false,
				sfContent: '',
				sfId: 0
            }
        },
        onLoad(option) {
			let type = option.type
			let titleName = option.titleName
			this.searchData = {}
			if(type){
				this.searchData.type = type
			}
			this.titleName = titleName
			this.findCategoryList();
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        onReachBottom() {
            this.loadStatus = 'loading';
            // 获取数据
        	this.findHouseList()
        },
        // 下拉刷新
        onPullDownRefresh() {
        	this.pageNum = 1
        	this.flowList = []
        	this.$refs.uWaterfall.clear();
        	// 获取数据
        	this.findHouseList();
        	// 关闭刷新
        	uni.stopPullDownRefresh();
        },
        methods: {
			findCategoryList() {
				let url = "/api/category/list";
				this.$u.get(url,{
					id: this.searchData.type
				}).then(result => {
					this.categorylist = result.data;
					this.findHouseList();
				});
			},
            findHouseList() {
            	let url = "/api/goods/goodsList";
            	this.$u.get(url, {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					id: this.categorylist[this.current].id
				}).then(result => {
					const data = result.rows;
            		if(this.pageNum>1 && data.length < this.pageSize){
            			return this.loadStatus = 'nomore';
            		}
            		this.houseList = data;
            		for (let i = 0; i < this.houseList.length; i++) {
            		    // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
            		    let item = this.houseList[i]
						var iamge2 = config.staticUrl + item.goodsImage
						item.goodsImage = iamge2
						if(item.goodsType === 1){
							item.lx = '视频'
						}else{
							item.lx = '文案'
						}
						if(item.addStatus === 0){
							item.sf = '未兑换'
						}else{
							item.sf = '已兑换'
						}
            		    this.flowList.push(item);
            		}
            		++ this.pageNum 
            		this.loadStatus = 'loadmore';
            	});
            },
			clickImageGo(houseId){
				for (let i = 0; i < this.houseList.length; i++) {
					 let item = this.houseList[i]
					 if(item.id === houseId){
						 if(item.addStatus === 0){
							 this.sfContent = '是否消耗' + item.goodsIntegral + '积分兑换商品？'
							 this.sfShow = true
							 this.sfId = houseId
						 }else{
							 this.clickImage(houseId)
						 }
					 }
				}
			},
			confirmC() {
				console.info(this.sfId)
				let url = "api/goods/saveOrder";
				this.$u.get(url, {
					id: this.sfId
				}).then(result => {
					this.clickImage(this.sfId)
				});
			},
			clickImage(houseId) {
			    this.$u.route({
			    	url: '/pages/detail/detail',
			    	params: {
			    		houseId: houseId
			    	}
			    })
			},
			//接收菜单结果
			change(index) {
				this.current = index;
				this.pageNum = 1
				this.flowList = []
				this.$refs.uWaterfall.clear();
				this.findHouseList();
			},
			confirm(e) {
				let type = e.value[1][0]
				let villageName = e.value[0][0]
				let price = e.value[2][0]
				let combo = e.value[3]
				let houseNum = combo[0]
				let decoration = combo[1]
				let feature = combo[2]
				this.searchData = {}
				if(type){
					this.searchData.type = type
				}
				if(villageName){
					this.searchData.villageName = villageName
				}
				if(price){
					this.searchData.price = price
				}
				if(houseNum && houseNum.length>0){
					this.searchData.houseNum = houseNum.toString()
				}
				if(decoration && decoration.length>0){
					this.searchData.decoration = decoration.toString()
				}
				if(feature && feature.length>0){
					this.searchData.feature = feature.toString()
				}
				this.pageNum = 1
				this.houseList = []
				this.flowList = []
				this.$refs.uWaterfall.clear();
				this.findHouseList()
			},
			code(){
				this.$mytip.toast('请咨询技术支持')
			}
        }
    }
</script>

<style lang="scss" scoped>
	.waterfall{
		// padding-top: 85rpx;
	}
	
	.nomore {
		background-color: $u-bg-color;
	}
	
	.search{
		width: 54px;
		height: 44px;
		
		&:active{
			background-color: $u-bg-color;
		}
	}
	
	.rowClass{
		border-radius: 8px;
		background-color: rgb(255, 255, 255);
		margin-top: 10rpx;
	}
	
	.hoverClass{
		background-color: #E4E7ED;
	}
	
	.tabName{
		font-size: 28rpx;
		color: $u-main-color;
	}
	
	.demo-warter {
	    border-radius: 8px;
	    margin-top: 3px;
	    background-color: #ffffff;
	    padding: 3px;
	    position: relative;
	}
	
	.u-close {
	    position: absolute;
	    top: 20rpx;
	    right: 20rpx;
	}
	
	.item-cover {
	    font-size: 55rpx;
	    color: $u-type-warning;
	}
	
	.item-title {
	    font-size: 28rpx;
	    color: $u-main-color;
	    font-weight: bold;
		padding-top: 5rpx;
		padding-left: 10rpx;
	}
	
	.item-price {
	    font-weight: normal;
	    font-size: 32rpx;
	    color: $u-type-warning;
	}
	
	.item-desc {
	    font-weight: normal;
	    font-size: 26rpx;
	    color: $u-tips-color;
		padding-bottom: 5rpx;
		padding-left: 10rpx;
	}
	
	.item-tag {
	    font-size: 24rpx;
	    color: $u-tips-color;
	    margin-top: 3px;
	}
</style>
